<template>
	<view>
	<!-- 提示框 -->
	<u-toast ref="uToast"></u-toast>
  <s-navBack title="建设工程验收过程" @goBack="goBack"></s-navBack>
	<view class="process">
		<u-form v-model="process">
			<u-row gutter="50">
				<u-col span="12">
					<view class="title">
						<view class="tips">
							<span>建设工程质量检测工作</span>
						</view>
						<view class="tips-company">
							<u-form-item label="单位名称" label-width="160" :required="true">
								<u-input input-align="right"  v-model="process.companyName" class="u-form-right" placeholder="请输入单位名称" placeholderStyle="color: #D9D9D9" />
							</u-form-item>
						</view>
					</view>
				</u-col>
			</u-row>
			<u-row gutter="50">
				<u-col span="12">
					<view class="" style="margin-top: 20rpx;">
						 <view class="content-son" v-for="(item, ind) of process.samples" :key="item.id" @click="contentSon(ind)">
							<u-form-item label="样品名称" label-width="160" >
								<u-input input-align="right"  v-model="item.sampleName" class="u-form-right" placeholder="请输入样品名称" placeholderStyle="color: #D9D9D9" />
							</u-form-item>
							<u-form-item label="样品部位规格型号" label-width="260">
								<u-input input-align="right" v-model="item.sampleModel" placeholder="请输入样品部位规格型号" placeholderStyle="color: #D9D9D9"/>
							</u-form-item>
							<view class="mePhoto">取样照片</view>
							<view class="u-demo">
								<view class="u-demo-wrap">
									<view class="u-demo-area">
										<u-upload :ref="'uUpload' + ind"
											:custom-btn="customBtn" :max-size="2 * 1024 * 1024"
											:action="action" :file-list="fileListQ[ind] || []"
											:header="header" :form-data="formData"
											 @on-success="onSuccess1"  @on-remove="onRemove1">
											<view v-if="customBtn" slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
												<u-icon name="photo" size="60"></u-icon>
											</view>
										</u-upload>
									</view>
								</view>
							</view>
							<view class="mePhoto">送样照片</view>
							<view class="u-demo">
								<view class="u-demo-wrap">
									<view class="u-demo-area">
										<u-upload :ref="'uUpload' + ind" 
											:custom-btn="customBtn" :max-size="2 * 1024 * 1024"
											:show-upload-list="showUploadList" :action="action"
											:file-list="fileListS[ind] || []"
											:header="header" :form-data="formData"
											 @on-success="onSuccess2"  @on-remove="onRemove2">
											<view v-if="customBtn" slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
												<u-icon name="photo" size="60"></u-icon>
											</view>
										</u-upload>
									</view>
								</view>
							</view>
							<u-button type="error" v-if="process.samples.length > 1" size="medium" @click="removeRow(ind)">删除</u-button>
							<view class="line" v-if="process.samples.length > 1"></view>
						</view>
						
						<view class="addBut">
							<view class="but">
								<u-button plain style="color: #007AFF;" @click="addRow">+新增样品</u-button>
							</view>
						</view>
					</view>
					
					 
					<view class="content">
						<u-form-item label="取样人姓名" label-width="160" >
							<u-input input-align="right"  v-model="process.users[0].sampleUsername" class="u-form-right" placeholder="请输入取样人姓名" placeholderStyle="color: #D9D9D9" />
						</u-form-item>
						<u-form-item label="手机号" label-width="140">
							<u-input input-align="right" v-model="process.users[0].samplePhone" maxlength="11" placeholder="请输入手机号" placeholderStyle="color: #D9D9D9"/>
						</u-form-item>
						<u-form-item label="身份证号" label-width="140">
							<u-input input-align="right"  v-model="process.users[0].sampleIdcard" maxlength="18" class="u-form-right" placeholder="请输入身份证号" placeholderStyle="color: #D9D9D9"/>
						</u-form-item>
						<view class="autograph" @click="doss1">
							<view v-if="!process.users[0].sampleAutograph">点击签名</view>
							<view class="imgs" v-else>
								<image class="img" :src="process.users[0].sampleAutograph" mode="widthFix"></image>
							</view>
						</view>
						<view class="mePhoto">个人照片</view>
						<view class="u-demo">
							<view class="u-demo-wrap">
								<view class="u-demo-area">
									<view class="pre-box" v-if="!showUploadList">
										<view class="pre-item" v-for="(item, index) in lists" :key="index">
											<image class="pre-item-image" :src="item.url" mode="aspectFill"></image>
											<view class="u-delete-icon" @tap.stop="deleteItem(index)">
												<u-icon name="close" size="20" color="#ffffff"></u-icon>
											</view>
										</view>
									</view>
									<u-upload ref="uUpload" :custom-btn="customBtn" :max-size="2 * 1024 * 1024"
										:show-upload-list="showUploadList" :action="action"
										:file-list="fileList1"
										:header="header" :form-data="formData"
										 @on-success="onSuccess3"  @on-remove="onRemove3">
										<view v-if="customBtn" slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
											<u-icon name="photo" size="60"></u-icon>
										</view>
									</u-upload>
								</view>
							</view>
						</view>
					</view>
					<view class="content">
						<u-form-item label="见证人姓名" label-width="160" >
							<u-input input-align="right"  v-model="process.witnesses[0].witnessUsername" class="u-form-right" placeholder="请输入见证人姓名" placeholderStyle="color: #D9D9D9" />
						</u-form-item>
						<u-form-item label="手机号" label-width="140">
							<u-input input-align="right" v-model="process.witnesses[0].witnessPhone" maxlength="11" placeholder="请输入手机号" placeholderStyle="color: #D9D9D9"/>
						</u-form-item>
						<u-form-item label="身份证号" label-width="140">
							<u-input input-align="right"  v-model="process.witnesses[0].witnessIdcard" class="u-form-right" maxlength="18" placeholder="请输入身份证号" placeholderStyle="color: #D9D9D9"/>
						</u-form-item>
						<view class="autograph" @click="doss2">
							<view v-if="!process.witnesses[0].witnessAutograph">点击签名</view>
							<view class="imgs" v-else>
								<image class="img" :src="process.witnesses[0].witnessAutograph" mode="widthFix"></image>
							</view>
						</view>
						<view class="mePhoto">个人照片</view>
						<view class="u-demo">
							<view class="u-demo-wrap">
								<view class="u-demo-area">
									<view class="pre-box" v-if="!showUploadList">
										<view class="pre-item" v-for="(item, index) in lists" :key="index">
											<image class="pre-item-image" :src="item.url" mode="aspectFill"></image>
											<view class="u-delete-icon" @tap.stop="deleteItem(index)">
												<u-icon name="close" size="20" color="#ffffff"></u-icon>
											</view>
										</view>
									</view>
									<u-upload ref="uUpload" :max-size="2 * 1024 * 1024"
										:custom-btn="customBtn" :file-list="fileList2"
										:show-upload-list="showUploadList" :action="action"
										:header="header" :form-data="formData" 
										@on-success="onSuccess4"  @on-remove="onRemove4">
										<view v-if="customBtn" slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
											<u-icon name="photo" size="60"></u-icon>
										</view>
									</u-upload>
								</view>
							</view>
						</view>
					</view>
					
					<view class="butList">
							<u-col span="6" class="btn1">
								<u-button shape="circle" plain @click="saveTemporary">临时保存</u-button>
							</u-col>
							<u-col span="6" class="but2">
								<u-button class="but" type="primary" @click="submitAcceptance" shape="circle">提交</u-button>
							</u-col>
						</view>
				</u-col>
			</u-row>
		</u-form>	
			<!-- 模态框提示框 -->
			<u-modal v-model="showModel1" cancel-text="不保存" confirm-text="保存" :show-title="false" :content="contentModel" show-cancel-button="true" confirm-color="#FFFFFF" @confirm="confirmClick1" @cancel="cancelClick1"></u-modal>
			<u-modal v-model="showModel2" :show-title="false" :content="contentModel" show-cancel-button="true" confirm-color="#FFFFFF" @confirm="confirmClick2" @cancel="cancelClick2"></u-modal>
			<!-- 模态框 -->
			<u-modal v-model="showModel.state" :content="showModel.content" show-cancel-button="true" confirm-color="#FFFFFF" @confirm="confirmClick" @cancel="cancelClick"></u-modal>
			<!-- 个人签名 -->
			<catSignature canvasId="canvas"  @close="close" @save="save1" :visible="isShow1" />
			<catSignature canvasId="canvas"  @close="close" @save="save2" :visible="isShow2" />
		
	</view>

</view>
</template>

<script>
	import catSignature from "@/components/cat-signature/cat-signature.vue"
	export default {
		name: 'acceptanceProcess',
		components: { catSignature },
		data() {
			return {
				indStatus: 0, // 点击新增数组状态
				showModel1: false, // 弹窗状态
				showModel2: false, // 弹窗状态
				contentModel: '', // 弹出框内容
				// 签名
				imgAutograph:'',
				isShow1: false,
				isShow2: false,
				// 弹出框
				showModel: {
					state: false,
					content: '',
					indx: ''
				},
				// 页面数据
				process: {
					companyName: "", // 单位名称
					detectionTypeId: '', // 检测分类ID
					id: '', // 工程检测ID
					samples: [ // 样品信息
						{
							id: this.uuid(),
							sampleModel: "", // 样品规格型号
							sampleName: "", // 样品名称
							sendImages: [], // 送样照片
							takeImages: [], // 取样照片
						}
					],
					users: [ // 取样人信息
						{
							sampleAutograph: "", // 取样人签名照片
							sampleIdcard: "", // 	取样人身份证号码
							samplePhone: "", // 取样人手机号码
							sampleUsername: "", // 取样人姓名
							userImages: [] // 取样人照片
						}
					],
					witnesses: [ // 见证人信息
						{
							witnessAutograph: "", // 见证人签名照片
							witnessIdcard: "", // 见证人身份证号码
							witnessImages: [], // 见证人照片
							witnessPhone: "", // 见证人手机号码
							witnessUsername: "" // 见证人姓名
						}
					]
				},
				action: 'https://project-supervision-api.sdhuan.cn/blade-resource/oss/endpoint/put-file',
				fileListQ: [], // 默认显示的图片列表，数组元素为对象，必须提供url属性
				fileListS: [], // 默认显示的图片列表，数组元素为对象，必须提供url属性
				fileList1: [], // 默认显示的图片列表，数组元素为对象，必须提供url属性
				fileList2: [], // 默认显示的图片列表，数组元素为对象，必须提供url属性
				showUploadList: true, // 是否显示组件内部的图片预览
				showUploadList1: false, // 是否显示组件内部的图片预览
				header: {},
				formData: {
					file: 'multipart/form-data',
				},
				autoUpload: true, // 选择完图片是否自动上传
				deletable: true,
				lists: [],
				lists1: [],
				list2: [],
				infoList: {}, // 上个页面传的数据
				backTrue: false, // 返回状态值
				saveTrue: false, // 临时保存状态
				dataLength: '' // 数据长度
			}
		},
		onLoad(e) {
			this.infoList = JSON.parse(e.infoList)
			console.log(this.infoList)
			this.token = uni.getStorageSync("token") || ''
			this.tenantId = uni.getStorageSync("tenantId") || ''
			this.header = {
				"Blade-Auth": this.token,
				"Tenant-Id": this.tenantId,
				"Content-Type":"multipart/form-data",
			}
			this.process.detectionTypeId = this.infoList.detectionTypeId
			this.getArceptanceInfo() // 获取验收草稿信息
			setTimeout(() => {
				// console.log('初始长度',JSON.stringify(this.process).length)
				let yy = JSON.stringify(this.process).length
				this.dataLength = yy
			}, 300)
		},
		methods: {
			// 返回上一级
			goBack() {
				this.backTrue = true
				if(JSON.stringify(this.process).length == this.dataLength && this.saveTrue == false){
					 this.$navJump.navigateBack()
					} else if(JSON.stringify(this.process).length != this.dataLength && this.saveTrue == false){
						this.showModel1 = true
						this.contentModel = '是否保存本次修改内容?'
						this.process.samples.map(item => {
							return delete item['id']
						})
					} else if(JSON.stringify(this.process).length != this.dataLength && this.saveTrue == true){
						this.$navJump.navigateBack()
					} else {
						this.$navJump.navigateBack()
				}
			},
			/**生成UUID */
			uuid(len, radix){
			  const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
			  let uuid = [],
				i;
			  radix = radix || chars.length;
			
			  if (len) {
					// Compact form
					for (i = 0; i < len; i++){
						uuid[i] = chars[0 | Math.random() * radix];
					}
			  } else {
				// rfc4122, version 4 form
				let r;
			
				// rfc4122 requires these characters
				uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
				uuid[14] = '4';
			
				// Fill in random data.  At i==19 set the high bits of clock sequence as
				// per rfc4122, sec. 4.1.5
				for (i = 0; i < 36; i++) {
				  if (!uuid[i]) {
						r = 0 | Math.random() * 16;
						uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];
						}
				  }
			  }
			
			  return uuid.join('');
			},
      // 获取草稿信息
			getArceptanceInfo() {
				let header = {
					"content-type":"application/json;charset=UTF-8"
				}
				let dataList = {
					detectionTypeId: this.infoList.detectionTypeId
				}
				this.$ajax.post({
					url: `/project-info/${this.infoList.projectId}/detectionDraftDetail`,
					data: JSON.stringify(dataList),
					header: header
				}).then(res => {
					// console.log(res)
					if(res.data != null) {
						this.process = res.data
						// console.log(this.process.samples)
						this.$nextTick(()=>{
							if(this.process.samples != undefined) {
								this.fileListQ = this.process.samples.map(item => {
									return item.takeImages
								})
								this.fileListS = this.process.samples.map(item => {
									return item.sendImages
								})
								this.fileListQ = this.fileListQ.map(item => {
									return item.map(items => ({
										 url: items
									}))
								})
								this.fileListS = this.fileListS.map(item => {
									return item.map(items => ({
										 url: items
									}))
								})
								// console.log('取样照片', this.fileListQ)
								// console.log('送样照片', this.fileListS)
							}
						})
						
						if(this.process.users[0].userImages != undefined) {
							this.fileList1 = this.process.users[0].userImages.map(item => ({
									url: item
							}));
						}
						if(this.process.witnesses[0].witnessImages != undefined) {
							this.fileList2 = this.process.witnesses[0].witnessImages.map(item => ({
							    url: item
							}));
						}
					}
				})
			},
	
			// 临时保存
			saveTemporary(){
				console.log(this.process.samples[0].sampleName)
				// if(this.process.companyName == '') {
				// 	this.$u.toast('请填写检测单位名称');
				// } else {
			    // this.showModel1 = true
			    // this.contentModel = '是否保存已填写内容?'
					if(this.process.companyName || this.process.samples[0].sendImages.length || this.process.samples[0].takeImages.length || this.process.samples[0].sampleModel || this.process.samples[0].sampleName || this.process.witnesses[0].witnessUsername || this.process.witnesses[0].witnessPhone || this.process.witnesses[0].witnessImages.length || this.process.witnesses[0].witnessIdcard || this.process.witnesses[0].witnessAutograph || this.process.users[0].userImages.length || this.process.users[0].sampleUsername || this.process.users[0].samplePhone || this.process.users[0].sampleIdcard || this.process.users[0].sampleAutograph) {
						console.log('删除前', this.process.samples)
						this.process.samples.map(item => {
							return delete item['id']
						})
						// console.log('删除后', this.process.samples)
						this.confirmClick1()
					} else {
						this.$refs.uToast.show({
							title: '请填写内容后再进行保存！',
							type: 'warning'
						})
					}
				
			},
			// 选择临时保存取消按钮
			cancelClick1() {
				this.showModel1 = false
				if(this.backTrue == true) {
					this.$navJump.navigateBack()
				}
			},
			// 选择临时保存确定按钮
			confirmClick1(){
				this.saveTrue = true
				let header = {
					"content-type":"application/json;charset=UTF-8"
				}
				
				let dataList = {
					companyName: this.process.companyName, // 检测单位名称
					id: this.process.id,	// 工程检测ID		
					detectionTypeId: this.infoList.detectionTypeId, // 检测分类ID
					samples: this.process.samples, // 	样品信息
					users: this.process.users, // 取样人信息
					witnesses: this.process.witnesses // 见证人信息
				}
				this.$ajax.post({
					url: `/project-info/${this.infoList.projectId}/detection/save`,
					data: JSON.stringify(dataList),
					header: header
				}).then(res => {
					// console.log(res)
					if(res.code == 200) {
						this.showModel1 = false
						// this.$u.toast('内容保存成功！');
						this.$refs.uToast.show({
							title: '内容保存成功！',
							type: 'success'
						})
						setTimeout(() => {
							let that = this
							if(that.backTrue == true) {
								that.$navJump.navigateBack()
							}
						}, 1200)
					}
				}) 
			},
			
			//新增表单
			addRow() {
				this.process.samples.push({
					id: this.uuid(),
					sampleModel: "", // 样品规格型号
					sampleName: "", // 样品名称
					sendImages: [], // 送样照片
					takeImages: [] // 取样照片
				})
				// console.log(this.process.samples)
				// // console.log(this.fileListQ)
				// console.log(this.fileListS)
			},
			// 删除表单
			removeRow(index) {
				// console.log(index)
				this.fileListQ = []
				this.fileListS = []
				this.$forceUpdate() // 强制刷新组件
				this.$nextTick(()=>{
					this.process.samples.splice(index, 1)
				})
			
			},
			
			// 上传照片
			deleteItem(index) {
				this.showModel.content = '是否删除该图片？'
				this.showModel.state = true
				this.showModel.indx = index
				
			},
			// 移除弹出框确认
			confirmClick() {
				this.$refs.uUpload.remove(this.showModel.indx);
				this.fileListQ[this.indStatus].splice(this.showModel.indx, 1)
			},
			// 移除弹出框取消
			cancelClick() {
				this.showModel.state = false
			},
			// 获取到新增列数的id
			contentSon(ind) {
				// console.log(ind)
				this.indStatus = ind
			},
			
			// 上传图片返回数据1
			onSuccess1(data, index, lists) {
				// // console.log('onSuccess1', data, index, lists);
				// console.log(data.data.link)
				this.process.samples[this.indStatus].takeImages.push(data.data.link)
				// console.log(this.process.samples)
			},
			onRemove1(data, index, lists) {
				// console.log('onRemove1', data, index, lists);
				this.process.samples[this.indStatus].takeImages.splice(data, 1)
			},
			
			// 上传图片返回数据2
			onSuccess2(data, index, lists) {
				// console.log('onSuccess2', data, index, lists);
				// console.log(data.data.link)
				this.process.samples[this.indStatus].sendImages.push(data.data.link)
			},
			onRemove2(data, index, lists) {
				// console.log('onRemove2', data, index, lists);
				this.process.samples[this.indStatus].sendImages.splice(data, 1)
			},
			
			// 上传图片返回数据3
			onSuccess3(data, index, lists) {
				// console.log('onSuccess3', data, index, lists);
				// console.log(data.data.link)
				this.process.users[0].userImages.push(data.data.link)
			},
			onRemove3(data, index, lists) {
				// console.log('onRemove3', data, index, lists);
				this.process.users[0].userImages.splice(data, 1)
			},
			
			// 上传图片返回数据4
			onSuccess4(data, index, lists) {
				// console.log('onSuccess4', data, index, lists);
				// console.log(data.data.link)
				this.process.witnesses[0].witnessImages.push(data.data.link)
			},
			onRemove4(data, index, lists) {
				// console.log('onRemove4', data, index, lists);
				this.process.witnesses[0].witnessImages.splice(data, 1)
			},
			
			
			// 点击签名
			doss1(){
				// console.log('取样照片')
				this.isShow1 = true;
			},
			doss2(){
				// console.log('见证人')
				this.isShow2 = true;
			},
			close(){
				this.isShow1 = false;
				this.isShow2 = false;
			},
			save1(val){
				// console.log(val)
				this.isShow1 = false;
				uni.uploadFile({
					url: 'https://project-supervision-api.sdhuan.cn/blade-resource/oss/endpoint/put-file', //仅为示例，非真实的接口地址
					filePath: val,
					name: 'file',
					formData: {
						file: 'multipart/form-data'
					},
					header: this.header,
					success: (res) => {
						// console.log(JSON.parse(res.data));
						let data = JSON.parse(res.data)
						if(data.code == 200) {
							this.process.users[0].sampleAutograph = data.data.link
						}
					}
				})
			},
			save2(val){
				// console.log(val)
				this.isShow2 = false;
				uni.uploadFile({
					url: 'https://project-supervision-api.sdhuan.cn/blade-resource/oss/endpoint/put-file', //仅为示例，非真实的接口地址
					filePath: val,
					name: 'file',
					formData: {
						file: 'multipart/form-data'
					},
					header: this.header,
					success: (res) => {
						// console.log(JSON.parse(res.data));
						let data = JSON.parse(res.data)
						if(data.code == 200) {
							this.process.witnesses[0].witnessAutograph = data.data.link
						}
					}
				})
			},
			


			
			// 提交检测
		  submitAcceptance() {
				if(this.process.companyName == '') {
					this.$refs.uToast.show({
						title: '请填写检测单位名称！',
						type: 'warning'
					})
				} else {
					this.showModel2 = true
					this.contentModel = '验收信息提交后不可再修改与查看，请确认是否上传？'
					this.process.samples.map(item => {
						return delete item['id']
					})
					// console.log('删除后', this.process.samples)
				} 
			},
			// 提交检测取消按钮
			cancelClick2() {
				this.showModel2 = false
			},
			// 提交检测确定按钮
			confirmClick2(){
				let header = {
					"content-type":"application/json;charset=UTF-8"
				}
				let dataList = {
					companyName: this.process.companyName, // 检测单位名称
					id: this.process.id,	// 工程检测ID		
					detectionTypeId: this.infoList.detectionTypeId, // 检测分类ID
					samples: this.process.samples, // 	样品信息
					users: this.process.users, // 取样人信息
					witnesses: this.process.witnesses // 见证人信息
				}
				console.log(dataList)
				this.$ajax.post({
					url: `/project-info/${this.infoList.projectId}/detection/submit`,
					data: JSON.stringify(dataList),
					header: header
				}).then(res => {
					console.log(res)
					if(res.code == 200) {
						let infoList = {
							name: '建设工程质量检测工作',
							title: this.process.companyName,
							projectId: this.infoList.projectId
						}
						this.$navJump.reLaunch('./processSuccess?info=' + JSON.stringify(infoList))
					}
				})
			}
		}
		
	}
</script>

<style lang="scss" scoped>
	.process {
		.title {
			background-color: #FFFFFF;
			border-radius: 8rpx;
			.tips {
				margin: 25rpx 0 0;
				font-size: 30rpx;
				padding: 30rpx 40rpx;
				border-bottom: 2rpx solid #f5f5f5;
				span {
					color: #3B85FE;
				}
			}
			.tips-company {
				padding: 0 30rpx;
			}
		}
		
		.content-son{
			background: #FFFFFF;
			padding: 0 30rpx;
			border-radius: 10rpx;
		}
		.addBut {
			background-color: #FFFFFF;
			margin-bottom: 30rpx;
			padding: 80rpx 0 30rpx;
			.but {
				width: 80%;
				margin: 0 10%;
			}
			/deep/.u-btn--default {
				color: #007AFF!important;
			}
		}
		.content {
			background: #FFFFFF;
			padding: 0 30rpx;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			h3 {
				color: #262626;
				font-size: 30rpx;
				font-weight: 600;
				padding-top: 20rpx;
			}
			.lineImg {
				margin-top: -30rpx;
				image {
					width: 120rpx;
					height: 9.5rpx;
				}
			}
		}
		.autograph {
			width: 100%;
			border: 2rpx solid #D9D9D9;
			font-size: 24rpx;
			color: #D9D9D9;
			border-radius: 8rpx;
			padding: 20rpx 30rpx;
			.imgs{
				width: 200rpx;
				height: 100rpx;
				display: flex;
				margin: 0 auto;
				flex-wrap: wrap;
				.img{
					 width: 100%;
					 height: 100%;
				}
			}
		}
		.mePhoto {
			margin: 40rpx 0 25rpx;
		}	
	}
	.text {
		/deep/.u-border-bottom:after {
			border-bottom-width: 0!important
		}
		
	}
  .butList {
			margin: 20rpx 0 40rpx;
			.btn1 {
				/deep/.u-btn--default {
					border-color: #3B85FE!important;
					color: #3B85FE!important;
					margin: 50rpx 0 80rpx;
				}
			
			}
			.but2 {
				/deep/.u-btn--primary{
					background:linear-gradient(to right ,#3B85FE, #3BC0FE)!important;
					margin: 50rpx 0 80rpx;
				}
			}
		}
		
		
		
// 上传照片css
		.u-demo {
			padding-bottom: 30rpx;
		}
		/deep/.u-list-item {
			margin: 8rpx!important;
		}
		.u-demo-wrap {
			background-color: #FFFFFF;
			padding: -10rpx 8rpx 20rpx;
			margin-left: -14rpx;
			margin-right: -14rpx;
		}
		
		.u-add-wrap {
			flex-direction: column;
			color: $u-content-color;
			font-size: 28rpx;
		}
		
		/deep/ .slot-btn {
			width: 329rpx;
			height: 140rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background: rgb(244, 245, 246);
			border-radius: 10rpx;
		}
		 
		.slot-btn__hover {
			background-color: rgb(235, 236, 238);
		}
		 
		.pre-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-wrap: wrap;
		}
		 
		.pre-item {
			flex: 0 0 48.5%;
			border-radius: 10rpx;
			height: 140rpx;
			overflow: hidden;
			position: relative;
			margin-bottom: 20rpx;
		}
		 
		.u-progress {
			position: absolute;
			bottom: 10rpx;
			left: 8rpx;
			right: 8rpx;
			z-index: 9;
			width: auto;
		}
		 
		.pre-item-image {
			width: 100%;
			height: 140rpx;
		}
		 
		.u-delete-icon {
			position: absolute;
			top: 10rpx;
			right: 10rpx;
			z-index: 10;
			background-color: $u-type-error;
			border-radius: 100rpx;
			width: 44rpx;
			height: 44rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	
		.line {
			margin: 80rpx 0 0;
			width: 100%;
			height: 2rpx;
			background: #999999;
		}
		.title {
			margin-top: 155rpx;
		}
		
		/* X、XS机型的媒体查询 */
		@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
			.title {
				margin-top: 185rpx;
			}
		}
		/* XS MAX机型媒体查询 */
		@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3){
			.title {
				margin-top: 185rpx;
			}
		}
		/* XR机型媒体查询 */
		@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2){
			.title {
				margin-top: 185rpx;
			}
		}
</style>

